<template>
  <view class="app">
    <up-card :title="cost" @click="onPayClick">
      <template #body>
        <view class="content">
          <view class="card">
            <text class="title">待缴物业费</text>
            <text class="value">200.00元</text>
          </view>
          <view class="mid"></view>
          <view class="card">
            <text class="title">停车费</text>
            <text class="value">146.90元</text>
          </view>
        </view>
        <view class="total">总计：<text>246.90元</text></view>
      </template>
    </up-card>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const cost = ref('缴费信息')

const onPayClick = () => {
  uni.navigateTo({
    url: '/pages/others/payPage'
  })
}
</script>

<style lang="scss" scoped>
.app {
  width: 96%;
  margin: 0 auto;
}
.content {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  .card {
    width: 48%;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .mid {
    width: 2%;
    height: auto;
    border-right: 1px solid #999;
  }
}
.total {
  width: 100%;
  height: auto;
  margin-top: 20rpx;
  text {
    color: #f00;
  }
}
</style>
